<template>
  <el-row class="bj bodyrow">
    <el-dialog title="添加工作" width="500px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="公司" :label-width="lableWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="lableWidth">
          <el-input v-model="form.position"></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="lableWidth">
          <el-input v-model="form.time"></el-input>
        </el-form-item>
        <el-form-item label="成果"  :label-width="lableWidth">
          <el-input   v-model="form.result"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="insert">确 定</el-button>
      </span>
    </el-dialog>
    <el-card>
      <el-row class="buttonrow">
        <el-button @click="dialogFormVisible = true" type="warning" round
          >添加</el-button
        >
        <el-button @click="del()" type="warning" round>删除</el-button>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        max-height="500"
        border
        stripe
        @cell-click="cellclick"
        @row-dblclick="cancel">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column prop="name" label="公司">
           <template slot-scope="scope">
            <el-input
              ref="x"
              v-if="scope.row.isOK"
              v-model="scope.row.name"
              @keyup.native.enter="blurClick(scope)"
              style="width: 100%; hight: 100%">
            </el-input>
            <span size="mini" v-else>{{ scope.row.name }}</span>
           </template>
        </el-table-column>
        <el-table-column prop="position" label="职位" >
            <template slot-scope="scope">
            <el-input
              ref="x"
              v-if="scope.row.isOK"
              v-model="scope.row.position"
              @keyup.native.enter="blurClick(scope)"
              style="width: 100%; hight: 100%">
            </el-input>
            <span size="mini" v-else>{{ scope.row.position }}</span>
           </template>
        </el-table-column>
        <el-table-column prop="time" label="时间">
           <template slot-scope="scope">
            <el-input
              ref="x"
              v-if="scope.row.isOK"
              v-model="scope.row.time"
               @keyup.native.enter="blurClick(scope)"
              style="width: 100%; hight: 100%">
            </el-input>
            <span size="mini" v-else>{{ scope.row.time }}</span>
           </template>
        </el-table-column>
        <el-table-column prop="result" label="成果" :show-overflow-tooltip="true">
             <template slot-scope="scope">
            <el-input
              ref="x"
              v-if="scope.row.isOK"
              v-model="scope.row.result"
              @keyup.native.enter="blurClick(scope)"
              style="width: 100%; hight: 100%">
            </el-input>
            <span size="mini" v-else>{{ scope.row.result }}</span>
           </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-row>
</template>

<script>
export default {
  name: "UpdateWork",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        position: "",
        time: "",
        result: "",
      },
      lableWidth: "100px",
    };
  },
  methods: {
    del() {
      let rows = this.$refs.multipleTable.selection;
      if (rows) {
        let ids = [];
        rows.forEach((row) => {
          ids.push(row.id);
        });
        this.$Sev.post("/api/delWork", { ids: ids }, (data) => {
          this.query();
        },this.tologin);
      }
    },
     cellclick(row, column, cell, event) {
      if (column.label) {
        this.$set(row, "isOK", true);
      } else {
        return;
      }
    },
    blurClick({ row, column }) {
      if (column.label) {
        this.$set(row, "isOK", false);
        // console.log(row)
        this.$Sev.post("/api/updateWork", row, (data) => {
          this.$mb(data, "更新工作", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
        },this.tologin);
      } else {
        return;
      }
    },
    insert() {
      this.dialogFormVisible = false;
      this.$Sev.post("/api/insertWork", this.form, (data) => {
        this.query();
        this.form = {};
      },this.tologin);
    },
    closeDialog() {
      this.dialogFormVisible = false;
      this.form = {};
    },
    query() {
      this.$Sev.post("/api/queryWorks", {}, (data) => {
        this.tableData = data;
      },this.tologin);
    },
    cancel(row, column, cell, event) {
      this.$set(row, "isOK", false);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    tologin(){
        // console.log("跳转到登录页")
        this.$router.push({path:'/login'});
    },
  },
  mounted() {
    this.query();
  },
};
</script>
<style scoped>
.bodyrow {
  width: 800px;
  height: 600px;
  margin: 0% auto;
  margin-top: 100px;
}
.el-table {
  margin-top: 15px;
}
.ibutton {
  display: block;
  left: 0;
  width: 100px;
}
.el-input {
  width: 250px;
  display: block;
  left: 0;
}
.buttonrow {
  text-align: left;
}
</style>
